<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>axios应用程序</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
	</head>
	<body>
		<div id="app">
		  <div>
			  名称: {{info.name}}
		  </div>
		  <div>
			  地址: <a v-bind:href="info.url">{{info.url}}</a>
		  </div>
		  <ol>
				<li v-for="link in info.links">{{link.name}}--><a v-bind:href="link.url">{{link.url}}</a></li>
		  </ol>
		</div>
		
		
		<script>
			var app = new Vue({
			  el: '#app',
			  data(){
				  return {
					  info:{
						  name:'',
						  url:'',
						  links:[]
					  }
				  }
			  },
			  mounted() {
			  	axios.get("data.json").then(response =>{
					this.info = response.data
				})
			  }
			})
			
		</script>
	</body>
</html>